<template>
  <div class="uploadImg">
    <div class="btnbox11 flex flexdc">
      <div class="uploadImgfile pre flexcenter el-icon-upload">{{ title }}
        <input ref="img" class="filePrew op0" style="width:80px!important;height:32px!important;" type="file" @change="addpht()">
      </div>
      <div class="tip">{{ tip }}</div>
    </div>
    <div class="previewImg" @click="handleShowPreView">
      <el-image v-if="picSrc === ''" class="img flexcenter">
        <div slot="error" class="image-slot errImg">
          <span>请上传图片</span>
        </div>
      </el-image>
      <el-image
        v-else
        v-loading="loading"
        class="img"
        :src="picSrc"
        lazy
        fit="fill"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      />
    </div>
    <PreImageView v-model="preViewVisible" :preview-url="picSrc" />
  </div>
</template>

<script>

import PreImageView from '@/components/preImageView/index'
import { showNotice } from '@/utils/toolclass'
export default {
  components: {
    PreImageView
  },
  props: {
    imgType: {
      type: String,
      default: ''
    },
    picUrl: {
      type: String,
      default: ''
    },
    isEdit: {
      type: Boolean
    },
    tip: {
      type: String,
      default: ''
    },
    state: {
      type: Number,
      default: null
    },
    title: {
      type: String,
      default: '点击上传'
    }
  },
  data() {
    return {
      loading: false,
      preViewVisible: false,
      picSrc: this.picUrl,
      type: this.state,
      imgTypeval: '',
      fileobj: {
        imgfile: '',
        imgType: '',
        base64Val: this.picUrl
      }
    }
  },
  watch: {
    picUrl(newName, oldName) {
      // console.log('newName, oldName')
      // console.log(newName)
      this.picSrc = newName
      this.fileobj.base64Val = newName
    }
  },
  created() {
    this.imgTypeval = this.$attrs.imgtype
    this.picSrc = this.picUrl
    // console.log('picUrl-----')
    // console.log(111, this.picUrl)
  },
  methods: {
    addpht() {
      var that = this
      var f = new FileReader()
      f.readAsDataURL(this.$refs.img.files[0])
      f.onload = function(ev) {
        // console.log(that.$refs.img.files)
        // console.log(that.$refs.img.files.length)
        // console.log(that.$refs.img.files.length > 0)
        if ((that.$refs.img.files[0].size / 1024).toFixed(2) > 100) {
          showNotice('error', '提示', '上传图片不能超过100KB')
          return
        }
        that.picSrc = f.result
        // console.log(that.picSrc)
        if (that.picSrc === '' || that.picSrc === undefined) {
          that.loading = true
        } else {
          that.loading = false
        }
        // console.log('图片加载完成')
        // console.log(that.imgTypeval, (that.$refs.img.files[0].size / 1024).toFixed(2))
        // console.log(ev)

        that.fileobj.imgfile = that.$refs.img.files[0]
        that.fileobj.imgType = that.imgTypeval,
        that.fileobj.base64Val = ev.target.result
        // let fileobj = {
        //   'imgfile': that.$refs.img.files[0],
        //   'imgType': that.imgTypeval,
        //   'base64Val':ev.target.result
        // }
        that.$emit('sendImginfo', that.fileobj)
      }
    },
    handleShowPreView() {
      // console.log(111, this.type)
      if (this.type === 1 && this.picSrc !== '') {
        this.preViewVisible = true
      }
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
.uploadImg {
  width: 260px !important;
}
.el-icon-upload:before {
  margin-right: 4px;
}
.btnbox11 {
  // width: 180px;
}
.tip {
  width: 122px;
  line-height: 24px;
  font-size: 12px;
  color: #ff0000;
  margin-left: -20px;
}
.uploadImgfile {
  width: 90px;
  height: 32px;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
}
.filePrew {
  position: absolute;
  width: 100% !important;
  height: 100%;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}
.previewImg {
  margin-top: 15px;
  .img {
    width: 160px;
    height: 160px;
    border-radius: 5px;
    border: 1px solid #eeeeee;
  }
}
</style>
